<template>
  <layoutPage class="drafts">
    <template #search>
      <vxe-form
        class-name="custom-form"
        :data="formSearch"
        title-align="right"
        align="left"
        title-width="120"
        @submit="handleSearch"
        @reset="handleReset"
      >
        <vxe-form-item
          title="是否已读："
          field="type"
          span="6"
          :item-render="{}"
          title-width="80"
        >
          <template #default>
            <el-select v-model="formSearch.type" placeholder="请选择">
              <el-option label="不限" value="" />
              <el-option
                v-for="item in _discStore.getDictType('drafts_business_type')"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </template>
        </vxe-form-item>
        <vxe-form-item
          title="发送时间："
          field="createTime"
          span="6"
          :item-render="{}"
          title-width="80"
        >
          <template #default>
            <el-date-picker
              v-model="formSearch.createTime"
              type="daterange"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
              value-format="YYYY-MM-DD HH:mm:ss"
            />
          </template>
        </vxe-form-item>
        <vxe-form-item span="12" align="right">
          <template #default>
            <el-button native-type="submit" type="primary">搜索</el-button>
            <el-button native-type="reset">重置</el-button>
          </template>
        </vxe-form-item>
      </vxe-form>
    </template>
    <template #default>
      <vxe-grid
        ref="xGrid"
        border
        stripe
        keep-source
        auto-resize
        sync-resize
        :loading="listLoading"
        :column-config="{ resizable: true }"
        :export-config="{}"
        :columns="tableColumn"
        align="left"
        :row-config="{ keyField: 'id', isCurrent: true, isHover: true }"
      >
        <template #form>
          <div class="button-list">
            <el-button type="primary" @click="handleMarkCheckedStatus">
              勾选项标记为未读
            </el-button>
            <el-button>导出搜索结果</el-button>
          </div>
        </template>
        <template #options="{ row }">
          <el-button type="primary" link @click="handleMarkRowStatus(row)">
            标记为未读
          </el-button>
        </template>
        <template #bottom>
          <el-pagination
            background
            :current-page="formSearch.pageNo"
            layout="total, sizes, prev, pager, next, jumper"
            :page-size="formSearch.pageSize"
            :total="formSearch.total"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
          />
        </template>
      </vxe-grid>
    </template>
  </layoutPage>
</template>

<script lang="ts" setup>
  import layoutPage from '@/components/layoutPage.vue'
  import {
    formSearchProps,
    optionsProps,
    pagingProps,
    rowProps,
    resPageProps,
  } from '../interface'
  import { useDictStore } from '@/store/modules/dict'

  const _discStore = useDictStore()
  const tableColumn = [
    { title: '全选', type: 'checkbox', with: 50 },
    { title: '消息ID', field: 'ID', minWidth: 50 },
    { title: '消息主题', field: 'teamNo', minWidth: 120 },
    { title: '消息内容', field: 'teamName', minWidth: 120 },
    { title: '消息发送人', field: 'type', minWidth: 120 },

    {
      title: '消息发送时间',
      field: 'meterNo',
      minWidth: 120,
      formatter: ['formatDate', 'yyyy-MM-dd HH:mm:ss'],
    },
    {
      title: '操作',
      field: 'options',
      width: 100,
      slots: { default: 'options' },
    },
  ]
  // 关键字变量
  const keyWordsOptions: optionsProps[] = [
    {
      id: 1,
      label: '消息主题',
      value: '消息主题',
    },
    {
      id: 2,
      label: '消息内容',
      value: '消息内容',
    },
    {
      id: 3,
      label: '消息发送人',
      value: '消息发送人',
    },
  ]
  // 状态
  const statusOptions = ref<optionsProps[]>([])
  // 上报单位变量
  const reportingUnitOptions = ref<optionsProps[]>([])
  // 表格实例
  const xGrid = ref(null)
  // 加载状态
  const listLoading = ref<boolean>(false)
  // 查询表单
  const formSearch = reactive<Partial<formSearchProps> & pagingProps>({
    pageNo: 1,
    pageSize: 10,
    total: 0,
  })

  // 搜索
  const handleSearch = async () => {
    const [researchStartDate1 = '', researchStartDate2 = ''] =
      formSearch.researchStartDate || []
    const [researchEndDate1 = '', researchEndDate2 = ''] =
      formSearch.researchEndDate || []

    // 创建新的对象，排除 researchStartDate 和 researchEndDate，并添加处理后的日期
    const { researchStartDate, researchEndDate, ...rest } = formSearch
    const requestPayload = {
      ...rest,
      researchStartDate1,
      researchStartDate2,
      researchEndDate1,
      researchEndDate2,
    }

    // try {
    //   listLoading.value = true
    //   const res: resPageProps = await getYearBudgetApplayPage(requestPayload)
    //   if (res && res.code === 0 && res.data) {
    //     xGrid.value.reloadData(res.data?.list || [])
    //     formSearch.total = res.data?.total
    //   } else {
    //     xGrid.value.reloadData([])
    //   }
    // } catch (e) {
    //   console.error('获取公司年度预算列表时出错:', e)
    //   xGrid.value.reloadData([])
    // } finally {
    //   listLoading.value = false
    // }
  }
  // 重置
  const handleReset = () => {
    formSearch.pageNo = 1
    formSearch.pageSize = 10
    formSearch.total = 0
    handleSearch()
  }

  // 分页大小变化
  const handleSizeChange = (val: number) => {
    formSearch.pageSize = val
    handleSearch()
  }

  // 当前页变化
  const handleCurrentChange = (val: number) => {
    formSearch.pageNo = val
    handleSearch()
  }

  // 标记勾选
  const handleMarkCheckedStatus = () => {
    const records = xGrid.value.getCheckboxRecords()
    if (records.length > 0) {
      // 处理
      ElMessageBox.confirm('确定将选中数据标记为未读?', '标记未读', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          ElMessage({
            type: 'success',
            message: '标记成功',
          })
        })
        .catch(() => {
          ElMessage({
            type: 'info',
            message: '标记失败',
          })
        })
    } else {
      ElMessage.info('未勾选数据')
    }
  }

  // 处理标记状态
  const handleMarkRowStatus = (row?: any) => {
    // 单独处理
    ElMessageBox.confirm('确定标记为未读?', '未读标记', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    })
      .then(() => {
        ElMessage({
          type: 'success',
          message: '标记成功',
        })
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '标记失败',
        })
      })
  }

  onMounted(() => {
    xGrid.value.reloadData([
      {
        ID: '11122',
      },
    ])
  })
</script>

<style lang="scss" scoped></style>
